<template>
    <div class="wrap">
      <view class='top'>
        <image class="back"></image>
        <!-- <image src="/static/images/back.png" mode='aspectFit' class="back"></image> -->
        <text>详情</text>
        <image src="/static/images/dotted.png" mode='aspectFit' class="dotted"></image>
      </view>
      <!-- top end -->

      <view class="imagebox">
        <image :src="detailInfo.image" mode='aspectFit'></image>
      </view>
      <!-- 图片 end -->

      <view class="conbox">
        <view class="title"><text>当当自营</text>{{detailInfo.name}}</view>
        <view class="intro">{{detailInfo.desc}}</view>
      </view>
      <!-- 内容 end -->

      <view class="pricebox">
        <view class="newprice">
            <text class="pre">￥<text>{{detailInfo.price}}</text></text>
            <text class="discount">(9.8折)</text>
            <text class="depre">降价通知</text>
        </view>
        <view class="oldprice">定价<text>￥{{detailInfo.old_price}}</text></view>
      </view>
      <!-- 价格 end -->

      <view class="bottom">
        <view class="ibox"><image src="/static/tabs/home.png" mode="aspectFit"></image> 店铺</view>
        <view class="ibox two" @click="toCart"><image src="/static/tabs/cart.png" mode="aspectFit" class="carticon"></image> 购物车</view>
        <view class="lbuy">立即购买</view>
        <view class="lbuy cart" @click="addCart">加入购物车</view>
      </view>
      <!-- bottom end -->
    </div>
</template>
<script>
export default {
  data(){
      return{
        detailInfo: ''
      }
  },
    
  methods:{
    toCart(){
      wx.switchTab({
        url: '/pages/cart/main'
      })
    },
    addCart(){
      let storage = wx.getStorageSync('cartlist') || [];
      // 没有返回-1，有返回下标
      let index = storage.findIndex((item,index)=>{
        return item.id == this.detailInfo.id
      })
      console.log(index)
      if(index === -1){
        this.detailInfo.count = 1;
        this.detailInfo.ischecked = true;
        storage.push(this.detailInfo)
        wx.setStorageSync('cartlist',storage)
      } else{
        storage[index].count++;
        wx.setStorageSync('cartlist',storage)
      }
    }
  },
  onLoad(e){
    wx.request({
      url: 'http://localhost:3000/detail?id='+ e.id,
      success:res=>{
        this.detailInfo = res.data
        console.log(res)
      }
    })
  }
}
</script>
<style scoped>
.top{
  width: 750rpx;
  height: 86rpx;
  background: #fff;
  border-bottom: 1px solid #ccc;
  line-height: 86rpx;
  display: flex;
  justify-content: space-between;
}
.top .back{
  width: 38rpx;
  height: 38rpx;
  margin-left: 20rpx;
  margin-top: 28rpx;
}
.top .dotted{
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
  margin-top: 25rpx;
}
/* top end */

.imagebox{
  border-bottom: 1px solid #ccc;
}
/* 图片 end */

.conbox{
  box-sizing: border-box;
  padding: 20rpx;
  background: white;
}
.conbox .title{
  font-size: 18px;
}
.conbox .title text{
  width: 110rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  display: inline-block;
  background: red;
  border-radius: 19rpx;
  color: white;
  font-size: 12px;
  margin-right: 20rpx;
}
.conbox .intro{
  color: #999;
  margin-top: 20rpx;
}
/* conbox end */

.pricebox{
  background: white;
  box-sizing: border-box;
  padding: 20rpx;
  padding-top: 10rpx;
}
.newprice .pre{
  color: red;
  margin-right: 10rpx;
}
.newprice .discount{
  color: #999;
}
.newprice .depre{
  display: inline-block;
  width: 140rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  font-size: 14px;
  border: 1px solid #333;
  margin-left: 10rpx;
  border-radius: 24rpx;
}
.newprice .pre text{
  font-size: 18px;
  margin-bottom: 10rpx;
}
.oldprice text{
  color: #999;
  text-decoration: line-through;
}
/* pricebox end */

.bottom{
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
}
.bottom .ibox{
  width: 155rpx;
  height: 100rpx;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 20rpx;
  font-size: 14px;
}
.bottom .two{
  padding-left: 0;
}
.bottom .ibox image{
  display: block;
  width: 60rpx;
  height: 60rpx;
}
.bottom .ibox .carticon{
  width: 58rpx;
  height: 58rpx;
  margin-left: 8rpx;
}
.bottom .lbuy{
  width: 220rpx;
  height: 100rpx;
  background: #ffb300;
  text-align: center;
  line-height: 100rpx;
  color: white;
}
.bottom .cart{
  background: red;
}
</style>